<!DOCTYPE HTML>
<html>
<head>
	<title>编辑小区业主信息</title>
	<meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
	<link rel="stylesheet" type="text/css" href="./hui/css/H-ui.min.css" />
	<link rel="stylesheet" type="text/css" href="./hui/css/H-ui.admin.css" />
	<link rel="stylesheet" type="text/css" href="./hui/Hui-iconfont/1.0.8/iconfont.css" />
	<link rel="stylesheet" type="text/css" href="./hui/layui/css/layui.css" />
</head>

<body>
	<div id="app">
		<article class="page-container">
			<div class="form form-horizontal" id="form-admin-add">
				<div class="row cl">
					<label class="form-label col-xs-4 col-sm-3">用户名：</label>
					<div class="formControls col-xs-8 col-sm-9">
						<input type="text" class="input-text" id="username" v-model="username">
					</div>
				</div>
				<div class="row cl">
					<label class="form-label col-xs-4 col-sm-3">姓名：</label>
					<div class="formControls col-xs-8 col-sm-9">
						<input type="text" class="input-text" id="realname" v-model="realname">
					</div>
				</div>
				<div class="row cl">
					<label class="form-label col-xs-4 col-sm-3">性别：</label>
					<div class="formControls col-xs-8 col-sm-9 skin-minimal">
						<div class="radio-box">
							<input type="radio" id="sex-1" v-model="sex" value="男" checked>
							<label for="sex-1">男</label>
						</div>
						<div class="radio-box">
							<input type="radio" id="sex-2" v-model="sex" value="女">
							<label for="sex-2">女</label>
						</div>
					</div>
				</div>
				<div class="row cl">
					<label class="form-label col-xs-4 col-sm-3">出生日期：</label>
					<div class="formControls col-xs-8 col-sm-9">
						<input type="text" class="input-text" id="birthday" v-model="birthday" @click="getDate4()" readonly="readonly" autocomplete="off">
					</div>
				</div>
				<div class="row cl">
					<label class="form-label col-xs-4 col-sm-3">楼栋：</label>
					<div class="formControls col-xs-8 col-sm-9"> <span class="select-box">
							<select class="select" title="楼栋" id="buildsid" v-model="buildsid">
								<option :value="item.buildsid" v-for="item in builds">{{ item.buildsname }}</option>
							</select>
						</span> </div>
				</div>
				<div class="row cl">
					<label class="form-label col-xs-4 col-sm-3">地址：</label>
					<div class="formControls col-xs-8 col-sm-9">
						<input type="text" class="input-text" id="address" v-model="address">
					</div>
				</div>
				<div class="row cl">
					<label class="form-label col-xs-4 col-sm-3">联系方式：</label>
					<div class="formControls col-xs-8 col-sm-9">
						<input type="text" class="input-text" id="contact" v-model="contact">
					</div>
				</div>
				<div class="row cl">
					<label class="form-label col-xs-4 col-sm-3">备注：</label>
					<div class="formControls col-xs-8 col-sm-9">
						<input type="text" class="input-text" id="memo" v-model="memo">
					</div>
				</div>
				<div class="row cl">
					<div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
						<button class="btn btn-secondary radius" @click.prevent="update()"><i
								class="Hui-iconfont">&#xe632;</i>提交保存</button>
						<button class="btn btn-default radius" @click.prevent="reset()">
							<i class="Hui-iconfont">&#xe68f;</i>取消重置
						</button>
					</div>
				</div>
			</div>
		</article>
	</div>

	<script type="text/javascript" src="./hui/jquery/1.9.1/jquery.min.js"></script>
	<script type="text/javascript" src="./hui/js/H-ui.min.js"></script>
	<script type="text/javascript" src="./hui/js/H-ui.admin.js"></script>

<!--此页面业务相关的脚本-->
	<script type="text/javascript" src="./hui/layui/layui.js"></script>
	<script type="text/javascript" src="./hui/js/axios.min.js"></script>
	<script type="text/javascript" src="./hui/js/vue.js"></script>
	<script type="text/javascript">

		const vue = new Vue({
			el: '#app',// 绑定作用域
			data: { //定义数据 用于vue的双向绑定
				usersid: '',
				username: '',
				password: '',
				realname: '',
				sex: '男',
				birthday: '',
				buildsid: '',
				address: '',
				contact: '',
				memo: '',
				builds: {},// 用来保存builds对象数据
			},
			methods: {
				getUrlParam: function () {
					var name, value;
					var str = location.href; // 取得整个地址栏
					var num = str.indexOf("?"); // 定位参数起始位置
					str = str.substr(num + 1); // 取得所有参数 
					var arr = str.split("&"); // 各个参数放到数组里
					for (var i = 0; i < arr.length; i++) {
						num = arr[i].indexOf("=");
						if (num > 0) {
							name = arr[i].substring(0, num);
							value = arr[i].substr(num + 1);
							this.usersid = value; // 确认主键参数
						}
					}
				},
				loadPage: function () {
					let _this = this;
					axios.get('http://127.0.0.1:8080/vue_wuye/users/getUsersById.action?id=' + _this.usersid).then(result => {
						_this.username= result.data.username;
						_this.password= result.data.password;
						_this.realname= result.data.realname;
						_this.sex= result.data.sex;
						_this.birthday= result.data.birthday;
						_this.buildsid= result.data.buildsid;
						_this.address= result.data.address;
						_this.contact= result.data.contact;
						_this.memo= result.data.memo;
					});
					axios.get('http://127.0.0.1:8080/vue_wuye/builds/getAllBuilds.action').then(result => {
						_this.builds = result.data;
					});
				},
				reset: function () {
					this.loadPage();
				},
				update: function () {
					let _this = this;
					var data = {
						usersid: _this.usersid,
						username: _this.username,
						password: _this.password,
						realname: _this.realname,
						sex: _this.sex,
						birthday: _this.birthday,
						buildsid: _this.buildsid,
						address: _this.address,
						contact: _this.contact,
						memo: _this.memo,
					};
					axios.post('http://127.0.0.1:8080/vue_wuye/users/updateUsers.action', data).then(result => {
						if (result.data.code > 0) {
							var index = parent.layer.getFrameIndex(window.name);
							parent.location.reload();
							parent.layer.close(index);
						} else {
							alert('修改失败');
						}
					});
				},
				getDate4: function () { // 日历点击事件
					var _this = this;
					var laydate = layui.laydate;
					laydate.render({
						elem: '#birthday',
						show: true,
						done: function (value) {
							_this.birthday = value;
						}
					})
				},
			},

			created() { // 生命周期相关的函数
				this.getUrlParam();
				this.loadPage();
				let _this = this;
				axios.get('http://127.0.0.1:8080/vue_wuye/builds/getAllBuilds.action').then(result => {
					_this.builds = result.data;
				});
			},
		})
	</script>
	<!--/ 此页面业务相关的脚本-->

</body>

</html>

